<template>
	<view>
      <view class="address">
          <!-- 两种状态：没有地址，注意：这里的叹号 -->
          <view v-if="!userAddress.userName" class="address_empty">
           <view @tap="getUserAddress" class="address_empty_btn">选择地址</view>
           <button open-type="openSetting">打开授权设置界面</button>
          </view>
          <!-- 两种状态：有地址 -->
          <view v-else class="address_info"  @tap="getUserAddress">
            <view class="address_info_detail">
              {{ addressDetail }}
            </view>
            <!-- 显示连续空格属性 -->
            <text space="emsp">{{ userAddress.userName }}   {{ userAddress.telNumber }}</text>
          </view>
      </view>
      <view class="cart_item" v-for="(item,index) in cartList" :key="item.goods_id">
        <view class="cart_item_right">
          <goodsItem :item="item"></goodsItem>
        </view>
        <!-- 定位的计数器 -->
        <view class="cart_item_count">
          <text class="cart_item_count_number">x{{ item.goods_count }}</text>
        </view>
      </view>
      <view class="bottom_bar">
        <view class="bottom_bar_group">
          <text class="total">
            合计：<text class="total_price">{{ totalPrice }}</text>
          </text>
        </view>
        <view @tap="showPayment" class="pay_btn">
          去支付({{ totalCount }})
        </view>
      </view>
  </view>
</template>

<script>
/*
  支付页
    1. 把购物车页的结构修改成订单支付页
      1. 删除多余的结构，商品选择按钮，商品加减号计数器
    2. 收货地址。
    3. 登录换取 token
    4. 支付流程
       1. 创建订单
       2. 准备预支付
       3. 发起微信支付 -  用回 wx.requestPayment 调用支付接口
       4. 查询订单
       5. 提示用户
       6. 更新购物车数据
       7. 跳转到订单页面
      失败捕获：
        try catch 捕获到错误，提示用户
*/ 
  
  import goodsItem from '../../components/goodsItem/index.vue';
	export default {
    components:{
      goodsItem
    },
		data() {
			return {
        // 收货地址
        userAddress: {},
        // 商品列表
				cartList: [],
			}
		},
    // 计算属性 
    computed:{
      // 详细地址计算
      addressDetail(){
        // 提取出需要拼接的地址信息
        const { detailInfo, countyName, cityName, provinceName } = this.userAddress;
        // 拼接并返回
        return provinceName + cityName + countyName + detailInfo;
      },
      // 计算总价格       1. 选中的商品       2. 单价 * 数量  累加的结果
      totalPrice(){
        let sum = 0;
        // 遍历数组每一项
        this.cartList.forEach(item=>{
          // 是否为选中的商品
          if(item.isSelect){
            // 价格累加
            sum += item.goods_price * item.goods_count;
          }
        });
        return sum;
      },
      // 选中的商品种类   <淘宝>计算规则
      // 选中商品总件数   <京东>计算规则
      totalCount(){
        // 选中的商品种类 <淘宝>计算规则  filter 过滤
        return this.cartList.filter(item=>item.isSelect).length;
      },
      
    },
    // 显示购物车页面的时候需要使用最新的数据
		onShow() {
      // 获取本地存储的购物车列表数据
      const cartList =  uni.getStorageSync('cartList') || [];
      // 过滤出来选中的商品用于支付页展示
      this.cartList = cartList.filter(item=>item.isSelect);
       
      // 从本地存储中获收货地址
      this.userAddress = uni.getStorageSync('userAddress') || {};
		},
		methods: {
      // 点击支付按钮
      async showPayment(){
        // 获取 token
        const token = uni.getStorageSync('token');
        // 如果没有 token
        if(!token){
          // 提示用户
          uni.showToast({
            title:'亲，要登录后才能完成支付',
            icon:'none'
          });
          // 跳转到支付
          setTimeout(()=>{
            uni.navigateTo({
              url:'/pages/auth/index'
            })
          },1000)
          return;
        };
        try {
          // 1. 创建订单
          /*
            后端接口 data 参数格式：
            {
              order_price: 订单总价格,
              consignee_addr: 收货地址,
              goods: [
                { goods_id:11, goods_number:1, goods_price:111 },
                { goods_id:22, goods_number:2, goods_price:222 }
              ]
            }
          */ 
           const goods = this.cartList.map(item=>{
             return {
               goods_id: item.goods_id,
               goods_number: item.goods_count,
               goods_price: item.goods_price
             }
           });
           // console.log({goods});
           // 发送请求生成订单
           const res = await uni.request({
             method: 'POST',
             url: 'https://api-hmugo-web.itheima.net/api/public/v1/my/orders/create',
             header: {
               Authorization: token
             },
             data: {
               order_price: this.totalPrice,
               consignee_addr: this.addressDetail,
               goods
             }
           });
           
           const { order_number } = res[1].data.message;
           // const  order_number  = res[1].data.message.order_number;
           // console.log({order_number});
           
           // 2. 准备预支付
           const res2 = await uni.request({
             method: 'POST',
             url: 'https://api-hmugo-web.itheima.net/api/public/v1/my/orders/req_unifiedorder',
             data: { order_number },
             header: {
               Authorization: token
             }
           });
           // console.log(res2);
           // 获取预支付参数
           const { pay } = res2[1].data.message;
           console.log({ pay });
           
           // 3. 发起微信支付 -  通过 wx.requestPayment 调用支付接口
           const res3 = await wx.requestPayment({
             ...pay
           });
           // debugger;
           // console.log('res3', res3);
           // 4. 查询订单
           const res4 = await uni.request({
             method: 'POST',
             url: 'https://api-hmugo-web.itheima.net/api/public/v1/my/orders/chkOrder',
             header: {
               Authorization: token
             },
             data: { order_number }
           });
           
           // 提示用户支付成功
           uni.showToast({ title: '支付成功' });
           
           // 更新本地存储购物车数据
           const oldCartList = uni.getStorageSync('cartList') || [];
           // 过滤出没有选择支付的商品
           const newCartList = oldCartList.filter(item => item.isSelect === false);
           uni.setStorageSync('cartList', newCartList);
           
           // 跳转到订单页面
           // redirectTo - 相当于 replace 替换
           uni.redirectTo({ url: '/pages/order/index' });
          
        } catch (e) {
          // console.log(e);  // 看错误信息
          uni.showToast({
            title: '支付失败',
            icon: 'none'
          });
        }
      },
      // 获取用户收货地址信息
      async getUserAddress(){
        // 模拟器有一些问题，没有办法很好复现
        // // 获取系统设置
        // const res = await uni.getSetting();
        // console.log(res);
        
        // const authStatus =  res[1].authSetting["scope.address"];
        // console.log('收货地址授权情况',authStatus);
        // // if(authStatus === false){
        // if(authStatus === true){
        //   wx.showToast({
        //     title:'亲，你没有打开权限哦',
        //     icon:'none'
        //   })
        //   uni.openSetting();
        // }
        
        uni.chooseAddress({
          success: (res) => {
            // console.log(res);
            // 保存到页面中，用于模板的数据绑定
            this.userAddress = res;
            // 保存到本地存储中
            uni.setStorageSync('userAddress', res);
          }
        })
      }
    }
	}
</script>

<style lang="less">
  page{
    background-color: #F9F9F9;
  }
  .address{
    height: 188rpx;
    display: flex;
    margin: 20rpx;
    background-color: #fff;
    .address_empty{
      flex:1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .address_empty_btn{
      color: var(--mainColor);
      border:2rpx solid var(--mainColor);
      border-radius: 45rpx;
      font-size: 30rpx;
      width: 300rpx;
      height: 90rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .address_info{
      
    }
    .address_info_detail{
      
    }
  }
  .cart_item{
    display: flex;
    position: relative;
    .cart_item_left{
      width: 100rpx;
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: 20rpx;
      box-sizing: border-box;
    }
    .cart_item_right{
      flex:1;
    }
    .cart_item_count{
      position: absolute;
      right:20rpx;
      bottom:20rpx;
      display: flex;
      .cart_item_count_icon{
        width: 32rpx;
        height: 32rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .cart_item_count_number{
        // 最小宽度，对齐更好
        min-width: 75rpx;
        display: flex;
        justify-content: center;
      }
    }
  }
  .bottom_bar{
    position: fixed;
    left:0;
    bottom:0;
    width: 100%;
    height: 84rpx;
    border-top:1rpx solid #ccc;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .total_price{
      color: var(--mainColor);
      &::before{
        content: "¥";
      }
    }
    .pay_btn{
      background-color: var(--mainColor);
      color:#fff;
      border-radius: 30rpx;
      height: 50rpx;
      width: 150rpx;
      font-size: 22rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>
